import { getImageUrl } from './utils.js'
import { people } from './data.js'

export default function List() {
  // const [count, setCount] = useState(0)
  // function handleClick() {
  //   setCount(count + 1)
  // }
  // return (
  //   <>
  //     <MyButton count={count} onClick={handleClick}></MyButton>
  //   </>
  // )
  // function MyButton({ count, onClick }) {
  //   return (
  //     <button onClick={onClick}>
  //       Count is {count}
  //     </button>
  //   )
  // }
  const listItems = people.map(person =>

    //尽量保持key的唯一性
    //key 值在兄弟节点之间必须是唯一的。 不过不要求全局唯一，在不同的数组中可以使用相同的 key。

    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        known for {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Scientists</h1>
      <ul>{listItems}</ul>
    </article>
  );
}
